
/*
学习目标:JSX 注意点
+ 只有在脚手架中才能使用 jsx 语法
  + 因为JSX需要经过 babel 的编译处理，才能在浏览器中使用。脚手架中已经默认有了这个配置。
+ JSX必须要有一个根节点， `<></>`  `<React.Fragment></React.Fragment>`
+ 没有子节点的元素可以使用`/>`结束
+ JSX中语法更接近与 JavaScript
  + `class` =====> `className`
  + `for`========>  `htmlFor`
+ JSX可以换行，如果JSX有多行，推荐使用`()`包裹JSX，防止自动插入分号的bug
*/
import React from "react";
import ReactDOM from "react-dom";


// const name = '张三'
const h1Node = (
  <>
    <div>hhh</div>
    <div>hhh</div>
    <div>hhh</div>
    {/*  + JSX中语法更接近与 JavaScript
  + `class` =====> `className`
  + `for`========>  `htmlFor`*/}
    <label htmlFor="ipt" >点我</label>
    <input type="text" id="ipt" />
  </>
)



// 渲染元素
// ReactDOM.render(创建的React元素,真实DOM作为挂载点)
ReactDOM.render(h1Node, document.getElementById('root'))